import { useLoad } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import Navigation from '@/components/Navigation';
import cssModule from './index.module.scss';
import { userPointsRecord } from '@/business/services/user/userInfo';
import { useState } from 'react';
import Blank from '@/components/Blank';

/**
 * @description 我的积分
 * @author Shawn
 */


interface PointRecord {
  id: number
  changePoints: number
  changeType: number
  createTime: string
}

export default function Credits() {

  const [records, setRecords] = useState<PointRecord[]>([])

  useLoad(() => {
    getUserPointsRecord()
  });

  const getUserPointsRecord = async () => {
    const res = await userPointsRecord({
      size: 10,
      current: 1
    })
    setRecords(res.data)
  }

  return (
    <View>
      {/* 自定义导航栏 */}
      <Navigation title='我的积分记录' centerTitle showBack />

      {/* 页面主体内容 */}
      <View className={cssModule.container}>
        {
          records.length === 0 ? <Blank text='暂无积分记录' />
            : <View className={cssModule.pointBox}>
              {records.map((item) => (
                <View className={cssModule.recordItem} key={item.id}>
                  <View className={cssModule.left}>
                    <Text className={cssModule.points}>{item.changePoints} 积分</Text>
                    <Text className={cssModule.desc}>
                      {
                        item.changeType === 1 ? '充值赠送'
                          : item.changeType === 2 ? '任务奖励'
                            : item.changeType === 3 ? '积分兑换扣减'
                              : item.changeType === 4 ? '系统调整'
                                : '其他'
                      }</Text>
                  </View>
                  <View className={cssModule.right}>
                    <Text className={cssModule.time}>{item.createTime}</Text>
                  </View>
                </View>
              ))}
            </View>}
      </View>
    </View>
  );
}
